diff options
author | vnugent <public@vaughnnugent.com> | 2023-07-12 01:28:23 -0400 |
---|---|---|
committer | vnugent <public@vaughnnugent.com> | 2023-07-12 01:28:23 -0400 |
commit | f64955c69d91e578e580b409ba31ac4b3477da96 (patch) | |
tree | 16f01392ddf1abfea13d7d1ede3bfb0459fe8f0d /front-end/src/views/Account/[comp].vue |
Initial commit
Diffstat (limited to 'front-end/src/views/Account/[comp].vue')
-rw-r--r-- | front-end/src/views/Account/[comp].vue | 136 |
1 files changed, 136 insertions, 0 deletions
diff --git a/front-end/src/views/Account/[comp].vue b/front-end/src/views/Account/[comp].vue new file mode 100644 index 0000000..75fd086 --- /dev/null +++ b/front-end/src/views/Account/[comp].vue @@ -0,0 +1,136 @@ +<template> + <div id="account-template" class="app-component-entry"> + <TabGroup :selectedIndex="tabId" @change="onTabChange" as="div" class="container h-full m-auto mt-0 mb-10 duration-150 ease-linear"> + + <div class="flex w-full py-2 xl:w-auto lg:pt-4 xl:fixed"> + + <TabList as="div" class="flex flex-row mx-auto mb-1 xl:mx-0 xl:mb-0"> + + <Tab v-slot="{ selected }" > + <span class="page-link" :class="{ 'active': selected }"> + Profile + </span> + </tab> + + <Tab v-slot="{ selected }" > + <span class="page-link" :class="{ 'active': selected }"> + OAuth + </span> + </tab> + + <Tab v-slot="{ selected }" > + <span class="page-link" :class="{ 'active': selected }"> + Settings + </span> + </tab> + + </TabList> + </div> + + <TabPanels as="div" class="xl:my-16 md:mb-4"> + + <TabPanel :unmount="false"> + <Profile /> + </TabPanel> + + <TabPanel :unmount="false"> + <OauthApps /> + </TabPanel> + + <TabPanel :unmount="false"> + <Settings /> + </TabPanel> + + </TabPanels> + + </TabGroup> + </div> +</template> + +<script setup lang="ts"> +import { computed } from 'vue' +import { usePageGuard, useTitle } from '@vnuge/vnlib.browser' +import { useRouteParams } from '@vueuse/router' +import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue' +import Settings from './components/settings/Settings.vue' +import Profile from './components/profile/Profile.vue' +import OauthApps from './components/oauth/Oauth.vue' + +usePageGuard() +useTitle('Account') + +enum ComponentType{ + Profile = 'profile', + Oauth = 'oauth', + Settings = 'settings' +} + +const comp = useRouteParams<ComponentType>('comp') + +const tabId = computed<number>(() =>{ + switch (comp.value) { + case ComponentType.Oauth: + return 1 + case ComponentType.Settings: + return 2 + case ComponentType.Profile: + default: + return 0 + } +}) + +const onTabChange = (tabid : number) =>{ + switch (tabid) { + case 1: + comp.value = ComponentType.Oauth + break + case 2: + comp.value = ComponentType.Settings + break + case 0: + default: + comp.value = ComponentType.Profile + break + } +} + +</script> + +<style lang="scss"> +#account-template{ + p{ + @apply text-gray-700 dark:text-gray-400; + } + + .page-link{ + font-size: 1.1rem; + @apply border-b-2 border-transparent cursor-pointer mx-2 px-1; + } + + .page-link.active{ + @apply border-primary-500; + } + + .acnt-content-container{ + @apply m-auto max-w-3xl; + } + + .panel-container{ + + } + + .panel-container .panel-header{ + @apply flex flex-row px-2; + } + + .panel-container .panel-content{ + @apply bg-white dark:bg-dark-800 border-transparent dark:border-dark-500; + @apply m-auto max-w-3xl border sm:rounded-md shadow-md sm:p-4 p-3 sm:my-3 my-2; + } + + .panel-container .panel-header .panel-title{ + @apply my-auto; + } +} + +</style> |